<template>
  <view class="page discount-page">
    <scroll-view :scroll-x="true" class="block-section">
      <view class="inner-block" >
        <text v-for="item in subFlags" 
          :key="item.id" :class="['tit-txt', checkedTye == item.id ? 'active':'']"
          @tap="changeFlag(item)"
        >{{item.name}}
        </text>
      </view>
    </scroll-view>

    <scroll-view
      class="box-1"
      :scroll-y="true"
      :scroll-top="scrollTop"
      :refresher-enabled="false"
      refresher-background="#ffffff"
      @scroll="scrollEv"
    >
      <view style="padding-bottom:70rpx;">
        <view v-for="item in itemList" 
          :key="item.id" 
          class="disc-item"
        >
          <image class="disc-img" :src="item.icon" mode="widthFix" @click="getImgUrl(item)"></image>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { isMpAlipay } from '@/utils/platform';
import statusBarInfo from '@/pages/welfare/mixins/statusBarInfo'
const app = getApp();
import { QueryDiscounts, QueryDiscountUrl } from '@/pages/welfare/api/index';
import { staticHost } from '@/setting';
	// #ifdef H5
import native from '@/static/js/nativeApp';
	// #endif
export default {
  mixins: [ statusBarInfo ],
  data() {
    return {
      isMpAlipay,
      isWhiteAppBar: false,
      staticHost,
      subFlags: [],
      itemList: [],
      menuBottom: 48,
      checkedTye: -1,
      scrollTop: 0
    };
  },
  onShow() {
    this.getSignCenterData()
  },
  methods: {
    changeFlag(item) {
      if (item.id == this.checkedTye) {
        return;
      }
      this.checkedTye = item.id;
      this.getSignCenterData()
    },
    getSignCenterData() {
      let params = ''
      if (this.checkedTye > -1) {
        params = 'pid=' + this.checkedTye
      }
      QueryDiscounts(params).then(res => {
        if (res.code == 200 && res.data) {
          console.log('x');
          let { typeList, itemList } = res.data;
          
          this.subFlags = typeList;
          this.itemList = itemList || [];
          this.scrollTop = 0;
        }
      })
    },
    getImgUrl(item) {
      QueryDiscountUrl({id: item.id}).then(res => {
        if (res.code == 200) {
          // #ifdef H5
          native.GotoWithOpenURL(res.data)
          // #endif
        }
      })
    },
    scrollEv(e) {
      this.scrollTop = e.target.scrollTop;
      console.log('this.scrollTop>> ', this.scrollTop);
      // if (typeof scrollTop === 'number') {
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
  .discount-page {
    width: 100%;
    background-color: #F2F2F2;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .box-1 {
      flex: 1;
      position: relative;
      height: calc(100% - 48px);
      padding: 12rpx 32rpx 0;

      .disc-item {
        width:100%;
        margin-top:24rpx;
        border-radius:28rpx;
        overflow:hidden;
        .disc-img {
          width: 100%;
          display: block;
        }
      }
    }
  }
  .block-section {
    width: 100%;
    white-space: nowrap;
    background: #fff;
    height: 48px;
    display: flex;
    align-items: center;
    

    .inner-block{
      padding-left: 32rpx;
      padding-right: 32rpx;
    }

    .tit-txt {
      display: inline-block;
      font-size: 32rpx;
      color: $grey_color;
      margin-right: 20px;
      height: 48px;
      line-height: 48px;

      &.active {
        color: #38BDF8;
        font-weight: bold;
        border-bottom: 2px solid #38BDF8;
      }
    }
  }
</style>
